<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>z-index 层叠顺序</title>
    <style>
      * {
        padding: 0px;
        margin: 0px;
      }

      .box1 {
        width: 400px;
        height: 400px;
        line-height: 200px;
        background-color: coral;
        text-align: center;
        position: absolute;
        left: 60px;
        top: 100px;
        z-index: 1;
      }

      .box2 {
        width: 200px;
        height: 200px;
        line-height: 200px;
        background-color: gold;
        text-align: center;
        position: absolute;
        left: 30px;
        top: 50px;
      }
    </style>
  </head>
  <body>
    <p>
      检索或设置对象的层叠顺序。
      z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
      每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定（每个元素仅属于一个层叠上下文）。
      同一个层叠上下文中，层叠级别大的显示在上面，反之显示在下面。
      同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。
      不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
    </p>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>
